<template>
	<div class="login2" style="height:100vh">
		<vue-particles color="#dedede"></vue-particles>
		<div class="con">
			<div class="center">
				<!-- <div class="img"><img src="../../static/img/welcome.png"></div> -->
				<div class="alt">
					<div class="title">您好，请登录落基{{moban.platform_name}}外呼系统V1.0</div>
					<el-input v-model="login.user" placeholder="请输入用户名"></el-input>
					<el-input v-model="login.pass" placeholder="请输入密码" show-password></el-input>
					<el-button type="danger" @click="logingo" @keyup.enter="loginen">登陆</el-button>
					<div class="flex" style="justify-content: space-between;">
						<div>
							<el-checkbox v-model="remember">记住密码</el-checkbox>
						</div>
						<!-- <div style="color: #1989FA; cursor: pointer; font-size: 14px; top: 2px; position: relative;" @click="gonoremeber">忘记密码</div> -->
					</div>
					<!-- <div class="gologin">还未开店？<router-link to="/register">注册店铺</router-link>
					</div> -->
				</div>
			</div>
			<div style="text-align: center; margin-top: 40px;">
				<b style="color: #b7b7b7;font-size:14px;">Copyright © 2019 Rocky. All rights reserved ICP 证: 鲁ICP备14015539号-4</b>
			</div>
		</div>
		<el-dialog title="完善信息提示" :visible.sync="tixing" width="600px" :close-on-click-modal="false" :close-on-press-escape="false"
		 :show-close="true">
			<div>为了让您的分销商供应商更好的联系到您，亲完善您的信息</div>
			<div class="flex">
				<div class="l1"><span class="red">*</span>联系电话：</div>
				<div class="l2">
					<el-input v-model="mobile" placeholder="请输入联系电话"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="l1"><span class="red">*</span>负责人：</div>
				<div class="l2">
					<el-input v-model="real_name" placeholder="请输入负责人"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="l1">公司名称：</div>
				<div class="l2">
					<el-input v-model="com" placeholder="请输入公司名称"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quxiao">取消</el-button>
				<el-button type="primary" @click="baocun">确认保存</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="tishilog" width="930px" :show-close="false" :close-on-click-modal="false"
		 :close-on-press-escape="false">

			<div style="background: #FF0000; text-align: center; color: #FFFFFF; font-size: 20px; padding: 20px 0;">重要提醒</div>
			<div style="padding: 100px 60px;">
				<div style="font-size: 18px; font-weight: bold; margin-bottom: 15px;">告{{moban.platform_name}}各位商家：</div>
				<div style="font-size: 16px; line-height: 30px;">
					<div> 近期{{moban.platform_name}}平台多次遭到攻击，对大家的业务造成了影响，为了应对该问题我们现决定<span style="margin: 0 20px; color: #ff0000;">更换登录地址</span>（域名），本次地址更换将影响您的以下业务：</div>
					<div>1、{{moban.platform_name}}登录地址：您将需要在新的地址登录 </div>
					<div>2、H5页面的推广地址：如果您有使用{{moban.platform_name}}的H5页面做抖音等信息流推广，请留意及时更换推广地址，方法：请在新地址登录后前往“商品管理页”复制新的链接去参与推广。</div>
					<div>3、已对接我们系统API接口的商家，请及时更换域名。</div>
					<div>{{moban.platform_name}}新的登录地址：<span style="margin: 0 20px; color: #0066FF;">https://gantanhao.vip</span>请收藏。</div>
					<div>注：本次更改后，新老地址将会同时有效一段时间，截止本月30日，您可在此期间做好过度准备。</div>

				</div>
				<div style="width: 150px; text-align: center; margin: 50px auto; margin-bottom: 0; color: #FFFFFF; background: #FF0000; padding: 15px;"
				 :disabled="tiao" @click="gogogo">我已知晓</div>
			</div>

		</el-dialog>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				tishilog: false,
				tiao: false,
				login: {
					user: '',
					pass: ''
				},
				remember: false,
				h: "",
				tixing: false,
				user_func: "",
				routeName: "",
				mobile: "",
				real_name: "",
				com: "",
				id: ""

			}
		},
		created() {
			var that = this
			document.onkeydown = function(e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode == 13) {
					that.logingo()
				}
			}

			//左边导航高度
			var h = document.documentElement.clientHeight;
			this.h = h;

			if (localStorage.getItem('luser')) {
				this.login.user = localStorage.getItem('luser')
			}
			if (localStorage.getItem('lpass')) {
				this.login.pass = localStorage.getItem('lpass')
			}
			if (localStorage.getItem('luser') && localStorage.getItem('lpass')) {
				this.remember = true
			}

			localStorage.removeItem('rush')

		},
		methods: {
			gonoremeber: function() {
				this.$router.push('/noremember')
			},
			gogogo: function() {
				this.go()
			},
			go: function() {
				if (this.user_func.length > 0) {
					for (var i in this.user_func) {
						var func_number = this.user_func[i] ? this.user_func[i].code : ''

						if (func_number.indexOf("A") >= 0) {
							this.routeName = '/mySupplier'
							break
						} //我的供应商
						if (func_number.indexOf("B") >= 0) {
							this.routeName = '/myDistributor'
							break
						} //我的分销商
						if (func_number.indexOf("C") >= 0) {
							this.routeName = '/productionDelivery'
							break
						} //产品管理中心
						if (func_number.indexOf("I") >= 0) {
							this.routeName = '/order_question'
							break
						} //订单管理
						if (func_number.indexOf("D") >= 0) {
							this.routeName = '/order_catch/order_catchjd'
							break
						} //生产管理
						if (func_number.indexOf("L") >= 0) {
							this.routeName = '/dataExcel/dataReport'
							break
						} //数据报表

						if (func_number.indexOf("J01") >= 0) {
							this.routeName = '/finance/onlinecommission'
							break
						} //收入管理
						if (func_number.indexOf("J02") >= 0) {
							this.routeName = '/finance/zhichu'
							break
						} //核算支出
						if (func_number.indexOf("J04") >= 0) {
							this.routeName = '/finance/financenumber'
							break
						} //返利管理

						if (func_number.indexOf("H") >= 0) {
							this.routeName = '/message'
							break
						} //消息通知
						if (func_number.indexOf("K") >= 0) {
							this.routeName = '/callsystem/taskCenter'
							break
						} //我的账户
					}
				} else {
					this.routeName = '/personalCenter'
				}
				this.$router.push({
					path: this.routeName
				});
			},
			baocun: function() {
				var that = this
				var obj = {}
				obj['mobile'] = this.mobile
				obj['real_name'] = this.real_name
				obj['com'] = this.com
				axios.post('/api/plan-market/user/info', obj)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.go()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			quxiao: function() {
				this.go()
			},
			logingo: function() {
				
				var that = this
				axios.post('/api/gth/shop/login', {
					name: this.login.user,
					password: this.login.pass,
				}).then(function(response) {
					if (response.data.msg.code == 0) {
						//保存个人信息
						localStorage.setItem('USER', JSON.stringify(response.data.data));
						
						that.$router.push({
							path: '/callsystem/taskCenter'
						});
						
					
					} else {
						that.$message.error(response.data.msg.info);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login .el-dialog__header {
		padding: 0;
	}

	.login .el-dialog__body {
		padding: 0;
	}

	.login2 {
		display: flex;
		justify-content: center;
		align-items: center;

		.flex {
			display: flex;
			margin-top: 20px
		}

		.l1 {
			width: 100px;
			line-height: 40px;
		}

		.l2 {
			width: 300px;
		}

		.red {
			color: #FF0000
		}

		#particles-js {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 9
		}

		.con {
			width: 430px; 
			z-index: 10;

			.el-input__inner {
				line-height: 36px;
				height: 36px;
			}

			.el-button--danger {
				padding: 10px 30px;
				line-height: 14px;
			}

			.top-logo2 {
				font-size: 30px;
				color: #EEF7FF;
				margin-bottom: 20px;
			}

			.center {
				background: #FFFFFF;
				box-shadow: 0px 0px 5px #d0d0d0;
				border-radius: 5px;
				display: flex;
				overflow: hidden;

				.img {
					flex-basis: 605px;
					height: 598px;
					overflow: hidden;

					img {
						height: 598px;
						width: auto !important;
					}
				}

				.alt {
					padding: 128px 60px;
					flex-basis: 310px;

					.title {
						font-size: 22px;
						color: #EEF7FF;
					}

					.el-input {
						margin-top: 40px;
					}

					.el-button {
						width: 100%;
						margin-top: 40px;
					}

					.gologin {
						text-align: center;
						margin-top: 20px;

						a {
							color: #2673F9
						}
					}
				}
			}
		}
	}
</style>
